Оцените мой первый сайт

lexx · May 2, 2013

Всем доброго дня!

Вот наконец то закончил свой первый сайд до полностью рабочего состояния!

http://trb.by/

Прошу вашей оценки и рекомендаций по улучшению!

В данном сайте использовал PHP, HTML, CSS, Javascript.

По поводу дизайна строго не судите так как я уже понял давно что с меня дизайнер не какой.

red4pony · May 2, 2013

Если позволите(прошу прощения за форматирование кода):

HTML:


<body>
<header>
<ul class="nav">
	 <li><a href="#"></a><!--нет закрывающего li чтобы не было word-spacing-->
	 <li><a href="#"></a>
	 <li><a href="#"></a>
	 <li><a href="#"></a></li>
</ul>
<div class="logo">
	 <h1>trb.by</h1>
	 <div class="phones">
		 <span class="phones-number"></span>
		 <span class="phones-number"></span>
	 </div>
</div>
<ul class="menu">
	 <li><a href="#"></a>
	 <li><a href="#"></a>
	 <li><a href="#"></a>
	 <li><a href="#"></a></li>
</ul>
</header>
<article>
<h2 class="title"></h2>
<div class="welcome"></div>
<div class="wrap-news">
<h3></h3>
	 <div class="news">
		 <div class="poster"><img src="" alt=""></div>
		 <p></p>
	 </div>
</div>
</article>
<footer></footer>
</body>

CSS:


/*Header*/
.nav{
text-align: right;
}
.nav-item{
display: inline-block;/*навигация станет горизонтальной*/
}
.nav-item>a{
background: <gradient>;
display: block;
}

.logo{
background: url(corner+car.jpg) #fff;
}
.logo>h1{
background: url(trb_by.png) no-repeat;
display: inline-block;
text-indent: 99999em;
}
.phones{
display: inline-block;
}

.menu>li{
display: inline-block;/*меню станет горизонтальным*/
}
/*———Article—--*/
.poster{
display: inline-block;
}
.wrap>p{
display: inline-block;
}

1)Используйте градиет(для навигации например)

2) не задавайте размеры жестко: ширина блоков в процентах, вертикальные margin/padding в em, горизонтальные margin/padding в процентах(будте осторожны когда будете высчитывать процентное соотношение), высоту не задавайте явно - регулируйте содержимым и padding'ом (кроме полосы с логотипом, тут необходимо указать), размер шрифта в em.

3) float не для того нужен. Используйте display:inlin-block (хорошая книга - Инлайновый контекст форматирования - Максим Усачёв, Илья стрельцын )

4) Используйте как можно меньше изображений (заменяйте на border-radius, gradient)

Int · May 6, 2013

Жирный зелёный текст с жирной чёрной обводкой — это перебор. Курсив в номерах телефонов ничем не оправдан, цифры курсивом вообще бессмысленно писать. Гостевушка в виде "пишите на почту" — это не гостевушка.

У тебя <link> идёт до <head>

Daiver · May 6, 2013

1. Гостевая - в идеале должна быть возможность оставить свой отзыв и сразу его увидеть - что-то в роде стены с сообщениями. Если такого нет возможности сделать, то можно сделать форму для отправки писем прямо с сайта на почту и назвать эту страницу "Обратная связь" или что-то в этом роде, ну или на крайний случай сделать ссылку вида mailto: , но картинка, на которой написан адрес электронной почты, который пользователю прийдется еще и вручную перепечатывать - это очень и очень плохо.

2. В разделе FAQ надо как-то отличить сами вопросы от их ответов оформлением. Вопросительные знаки - хорошо, но не совсем понятно где начинается ответ.

3. Меню с трансферами имеет в себе 4 кнопки и 3 разных оформления. Какой бы ни был плохой дизайнер, а верстка одного меню должна иметь хоть как-то одинаковое оформление всех пунктов.

4. Желательно использовать валидатор

lexx · May 6, 2013

В сем большое спасибо что уделили моему сайту немного времени, все ваши рекомендации и замечания я исправлю. Жду еще ваших предложений!

Попутно возник вот еще такой вопрос!

некоторые страницы имеют свои javascript и CSS

вызываю их так:

"<link rel="stylesheet" href="CSS/menu.css" type="text/css" media="screen" />

их окало 10

все "link" и "script" расположены в одном файле который участвует в формировании всех страниц!

Так вот интересно знать при загрузке какой то определенной страницы у меня загрузиться все 10 ("link" и "script") файлов или только те которые необходимы для отображения данной страницы?

viv · May 6, 2013

Еще совет использовать классы для элементов с одинаковыми стилями.

Например у Вас в коде есть:


id="blik_3"
id="blik_4"
id="blik_5"
id="blik_6" и т.д.

И каждому id в css вы пишите одинаковые стили:


#blik_3{
margin: 0px 10px 0px 10px;
}

#blik_4{
margin: 0px 10px 0px 10px;
}

#blik_5{
margin: 0px 10px 0px 10px;
}

Итого 9 штук id.

А можно обойтись всего одним классом.

Например:

class="description"

и css:


.description{
margin: 0 10px; /* равноценно 0px 10px 0px 10px */
}

Сколько строк мы сократили в стилях?

Также на странице у Вас повторяется id="title_home" аж 8 раз. И это ошибка. id - уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз. Почитать про это можно тут http://htmlbook.ru/html/attr/id

Так вот интересно знать при загрузке какой то определенной страницы у меня загрузиться все 10 ("link" и "script") файлов или только те которые необходимы для отображения данной страницы?

Это Вы можете посмотреть консолью браузера. На пример в Хроме она вызывается нажатием клавиши F12. Как появится окно кликните на вкладку Network и перезагрузите страницу. И будет видно, что грузит браузер, какое время он на это тратит. В общем полная исчерпывающая информация.

Edited May 6, 2013 by viv

Sign In

Оцените мой первый сайт

Recommended Posts

lexx

Link to comment

Share on other sites

red4pony

Link to comment

Share on other sites

Int

Link to comment

Share on other sites

Daiver

Link to comment

Share on other sites

lexx

Link to comment

Share on other sites

viv

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information